import React, { Component } from "react";
import "./login.scss";
export default class App extends Component {
  state = {
    mobile: "", //手机号
    msg_code: "",
    checked: false,
    error_msg: "",
  };
  handleChange = (e) => {
    let { type, key } = e.target.dataset;
    let value = "";
    if (type === "checkbox") {
      value = e.target.checked;
    } else {
      value = e.target.value;
    }
    this.setState({
      [key]: value,
    });
  };
  validateMobile = (mobile) => {
    if (!mobile) {
      this.setState({
        error_msg: "手机号码不能为空",
      });
      return false;
    }
    if (!/^1[0-9]{10}$/.test(mobile)) {
      this.setState({
        error_msg: "手机号码格式有误,请重新输入然后再试一下",
      });
      return false;
    }
  };
  handleLogin = (params) => {
    console.log("手机号：", this.state.mobile);
    let mobile = this.state.mobile;
    //手机号码不能为空
    let valid = this.validateMobile(mobile);
    if (!valid) {
      return false;
    }
    console.log("验证码:", this.state.msg_code);
    console.log("服务条款:", this.state.checked);
  };
  render() {
    return (
      <div className="login">
        <div className="login-mobile">
          <input
            type="text"
            name=""
            id=""
            data-type="text"
            data-key="mobile"
            value={this.state.mobile}
            onChange={this.handleChange}
            placeholder="请输入手机号"
          />
        </div>
        <div className="login-msg">
          <div className="login-msg-left">
            <input
              type="number"
              name=""
              id=""
              data-type="number"
              data-key="msg_code"
              value={this.state.msg_code}
              onChange={this.handleChange}
              placeholder="请输入短信验证码"
            />
          </div>
          <div className="login-msg-right">
            <div className="msg-right-btn">获取验证码</div>
          </div>
        </div>
        <div>
          {this.state.error_msg ? (
            <span className="error">{this.state.error_msg}</span>
          ) : (
            ""
          )}
        </div>
        {/*短信验证开始 */}
        <div className="login-p">
          <div className="login-p-left">遇到问题？</div>
          <div className="login-p-right">使用密码验证登录</div>
        </div>
        {/*短信验证结束 */}
        <div className="login-btn">
          <div className="btn-title" onClick={this.handleLogin}>
            登录
          </div>
        </div>
        <div className="login-policy">
          <input
            type="checkbox"
            name=""
            id=""
            data-type="checkbox"
            data-key="checked"
            value={this.state.checked}
            onChange={this.handleChange}
          />
          <span>我同意</span>
          {"<<"}
          <a href="#">服务条框</a>
          {">>"}
          <span>和</span>
          {"<<"}
          <a href="#">网易隐私政策</a>
          {">>"}
        </div>
      </div>
    );
  }
}
